<template>
  <div class="search">
    <!---->
    <input
      type="text"
      autocomplete=""
      placeholder="输入 BOT 关键词检索"
      name=""
      aria-label=""
      spellcheck="false"
      value=""
      class="search-input"
    />
    <!---->
    <span class="search-span">
      <!---->
      <div class="search-span-div">
        <SvgIcon name="search" size="18px" color="#1e80ff" />
        <!-- <img src="../assets/img/search.svg" alt="搜索图标" /> -->
      </div>
    </span>
    <!---->
  </div>
</template>

<script setup lang="ts">
import SvgIcon from './SvgIcon.vue'
</script>

<style lang="scss" scoped>
.search {
  width: 600px; /* 确保有足够的宽度 */
  height: 36px;
  margin: 16px;
  font-size: 16px;
  vertical-align: middle;
  position: relative;
  .search-input {
    border-radius: 4px;
    padding-left: 12px;
    padding-right: 36px;
    border: 0.8px solid rgb(221, 221, 221);
    box-sizing: border-box;
    resize: none;
    outline: none;
    width: 100%;
    height: 100%;
    color: #282f38;
    display: block;
    box-shadow: none;
    transition: border 0.3s;
    background-color: #fff;
    &::placeholder {
      color: #e1e3e5;
    }
    &:hover {
      border-color: #3370ff;
    }
    &:focus {
      border-color: #3370ff;
    }
  }
  .search-span {
    display: flex;
    justify-content: center; /* 居中对齐 */
    align-items: center;
    position: absolute;
    right: 1px; /* 定位到右侧 */
    top: 0;
    bottom: 0;
    width: 42px; /* 保持宽度 */
    .search-span-div {
      width: 42px;
      height: 30px;
      position: relative;
      right: 2px;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background-color: #eaf2ff;
      svg {
        width: 18px;
        height: 18px;
        font-weight: bold;
        color: #1e80ff;
        font-size: 18px;
      }
    }
  }
}
</style>
